<script setup>
import {ElMessage} from "element-plus";
import {ref, watch} from "vue";
import {router} from "../../router/index.js";
import axios from "axios";
const form=ref({
  status:1
})
const back =()=>{
  form.value={}
  imageUrl.value=''
  if (uploadRef.value){
    uploadRef.value.clearFiles();
  }
  router.push({name:'Service'})
}
const uploadRef=ref()
const imageUrl = ref('')
const handleAvatarSuccess = (resp)=>{
  imageUrl.value=resp;
  form.value.image=resp
  ElMessage.success("上传成功")
}
const beforeAvatarUpload = (rawFile) => {
  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png' && rawFile.type!=='image/webp') {
    ElMessage.error('您上传的头像必须是jpg或者png格式')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('您上传的图片大小必须2M以内')
    return false
  }
  return true
}
const submitForm = ()=>{
  axios.post('/carcenter-service-order/services/saveOrUpdate',form.value).then(resp=>{
    ElMessage.success(resp.data.message)
    router.push({name:'Service'})
  })
}
const rules = ref({
  name: [
    { required: true, message: '请输入服务名称', trigger: 'blur' }
  ],
  retailPrice: [
    { required: true, message: '请输入零售价', trigger: 'blur' }
  ],
  standardPrice: [
    { required: true, message: '请输入标准价', trigger: 'blur' }
  ],
  costPrice: [
    { required: true, message: '请输入成本价', trigger: 'blur' }
  ]
});
</script>

<template>
  <div class="service-add">
    <el-form :model="form" :rules="rules" ref="formRef" label-width="100px" class="demo-ruleForm">
      <el-form-item label="服务名称" prop="name" style="width: 50%">
        <el-input v-model="form.serviceName" placeholder="例如：洗车"></el-input>
      </el-form-item>
      <el-form-item label="单位" prop="unit" style="width: 50%">
        <el-select v-model="form.unitName" placeholder="请选择">
          <el-option label="个" value="个"></el-option>
          <el-option label="次" value="次"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="零售价" prop="retailPrice" style="width: 50%">
        <el-input v-model="form.retailPrice" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="标准价" prop="standardPrice" style="width: 50%">
        <el-input v-model="form.standardPrice" placeholder="请输入"></el-input>
        <span style="color: #999; font-size: 12px;">商品标准价，用于指导售价调整和为消费者提供一个参照价格，例如商品的吊牌价。</span>
      </el-form-item>
      <el-form-item label="成本价" prop="costPrice" style="width: 50%">
        <el-input v-model="form.costPrice" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="服务介绍" prop="serviceDescription" style="width: 50%">
        <el-input type="textarea" v-model="form.serviceDescription" placeholder="请输入服务介绍"></el-input>
      </el-form-item>
      <el-form-item label="服务状态">
        <el-radio-group v-model="form.status">
          <el-radio :label="1">发布</el-radio>
          <el-radio :label="0">不发布</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button @click="back">返回</el-button>
        <el-button type="danger" @click="submitForm">确认</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped>

</style>